import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'

Vue.use(VueRouter)
// 路由表 指的路由规则对象的数组, 路由对象是路径和组件的映射关系
const routes = [
  {
    path: '/',
    redirect: '/login',
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/login'),
    meta: {
      isWhite: true, // 是否在白名单里
    },
  },
  {
    path: '/reg',
    name: 'Reg',
    component: () => import('@/views/register'),
    meta: {
      isWhite: true, // 是否在白名单里
    },
  },
  {
    path: '/layout',
    name: 'Layout',
    component: () => import('@/views/layout'),
    redirect: '/home',
    children: [
      {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/home'),
      },
      {
        path: '/user-info',
        name: 'UserInfo',
        component: () => import('@/views/user/userInfo.vue'),
      },
      {
        path: '/user-avatar',
        name: 'UserAvatar',
        component: () => import('@/views/user/userAvatar.vue'),
      },
      {
        path: '/user-pwd',
        name: 'UserPwd',
        component: () => import('@/views/user/userPwd.vue'),
      },
      {
        path: '/art-cate',
        name: 'ArtCate',
        component: () => import('@/views/article/artCate.vue'),
      },
      {
        path: '/art-list',
        name: 'ArtList',
        component: () => import('@/views/article/artList.vue'),
      },
    ],
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})

// 路由前置守卫
// 注意： next() 如果强制切换路由地址，会再次走路由守卫，再次匹配路由表。
router.beforeEach((to, from, next) => {
  const token = store.state.token
  // 请求用户信息
  if (token) {
    // 如果有token, 证明已登录
    if (!store.state.userInfo.username) {
      // 只有本地有token的时候，才去请求用户信息
      // ！store.state.userInfo.username 为了防止切换路由的时候重复请求数据，没有用户名的时候再去请求数据，避免浪费
      store.dispatch('initUserInfo')
    }
    next()
  } else {
    // 未登录，就是无token，那么判断是不是登录页和注册页（白名单只要login和reg），是就放行，不是就强制跳转到登录页
    if (to.meta.isWhite) {
      next()
    } else {
      // 如果其他页面请强制拦截并跳转到登录页面
      next({ name: 'Login' })
    }
  }
})

export default router

// 退出登录，重新登录，App.vue不走，只走相关组件代码（异步dom切换，不会导致所有代码重新执行）
// 效果不对：换个账号登录它的重新请求用户数据啊
// 解决：
// 1. 在登录页面，登录成功之后，再发请求去拿到用户信息
// 2. 在layout页面的created生命周期钩子函数中拿到用户信息
// 3. 在全局前置路由守卫中，写（路由跳转的时候，判断+获取）
